<template>
  <el-container class="home-container">
 <!--顶部-->
        <el-header>
          <div class="header-logo">
            <!-- <img class="logo" src="../assets/images/logo.png" /> -->
            <span class="logo-text">淘夕夕电商后台管理系统</span>
          </div>
          <el-button type="success" @click="logout">退出</el-button>
        </el-header>
        
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px' ">
       <el-menu router :default-active="activePath" style="clear: both" class="el-menu-vertical-demo" >
         <!-- 定义一级菜单 -->
         <el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id">
           <!-- 定义一级菜单模版 -->
           <template slot="title">
             <!-- 定义左侧图标-->
             <i :class="menuIcon[menu.id]"></i>
             <!-- 定义菜单名称-->
             <span>{{menu.name}}</span>
           </template>
           <!-- 定义二级菜单 -->
           <el-menu-item :index="childrenMenu.path" v-for="childrenMenu in menu.children" :key="childrenMenu.id"
             @click="saveNavState('/'+childrenMenu.path)">
             <template slot="title">
               <i class="el-icon-menu"></i>
               <span>{{childrenMenu.name}}</span>
             </template>
           </el-menu-item>
         </el-submenu>

       </el-menu>
       </el-aside>

      <!-- 定义主页面结构-->
      <el-main>
        <!-- 定义路由展现页面-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>


<script>
  import { Menu } from '../api/userMG'
  export default {
    //初始化函数
    created() {
      this.getMenuList()
      //设定模式选中按钮
      this.activePath = sessionStorage.getItem('activePath')
    },
    data() {
      return {
        menuList: [],
        menuIcon: {
          '1': 'iconfont iconuser',
          '3': 'iconfont iconshangpin',
          '5': 'iconfont iconicon--copy',
          '7': 'iconfont iconquanxian',
          '8': 'iconfont iconziyuan'
        },
        //定义是否折叠
        isCollapse: false,
        //是否展现折叠动态效果
        isCollapseTransition: false,
        //定义默认高亮

        activePath:''

      }
    },
    methods: {
      logout() {
        //1.删除session中的记录
        localStorage.clear()
        //2.要求跳转到用户登录页面
        this.$router.push('/login')
      },
      getMenuList() {
        //1.查询左侧菜单
        Menu()
        .then(result => {
          if(result.status !== 200) return this.$message.error("获取权限列表失败")
          this.menuList = result.data
        })
      },

      saveNavState(activePath){
        //为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
       localStorage.setItem('activePath', activePath)
       this.activePath = activePath
      }
    },
    watch: {
      // 一旦路径发生变化，页面对应的菜单被激活，主要用于返回页面
      $route() {
        localStorage.setItem('activePath', this.$route.path)
        this.activePath = this.$route.path
      }
    }
  }
</script>

<!-- 防止样式重叠 -->


<style >

  .logo-text{
    font-size: 30px;
    padding: 10px 20px;
    display:inline-block;

    float:right;
  }
  .header-logo{
      margin-right: 20px;
  }
  .logo{
      width: 200px;
      height: 64px
  }

  .el-header{
        height: px !important;
        background: linear-gradient(to left,rgba(127, 7, 146, 1), rgba(30, 144, 255, 1)) !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #FFFFFF;
        padding: 0px 0px !important;
  }



 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-aside {
    background-color: #f5f7fa;

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    background-color: #EEEEEE;
  }

  .home-container {
    height: 100%;
    width: 100%;
  }

  .iconfont {
    margin-right: 8px;
  }

</style>
